<template>
	<view class="template-blogger">
		<!-- 顶部自定义导航 -->
		<tn-nav-bar fixed alpha customBack>
			<view slot="back" class='tn-custom-nav-bar__back' >
				<text class='icon tn-icon-left' @click="goBack"></text>
				<text class='icon tn-icon-home-capsule-fill' @click="goHome"></text>
			</view>
		</tn-nav-bar>

		<!-- 立体头像-->
		<view v-if="userInfo" class='cube' :style="'background-image: url(https://mp-06378714-38ed-4e5b-bc65-66e29cbd60b7.cdn.bspapp.com/cloudstorage/94b44ede-6b48-4a8b-a369-64cfa02d4563.jpg);'">
			<view class="cube__container">
				<view class="cube__container__body">
					<view class="cube__container__body__item cube__container__body__item--front"
						:style="{backgroundImage: `url(${userInfo.avatorfile.url})`}"></view>
					<view class="cube__container__body__item cube__container__body__item--back"
						:style="{backgroundImage: `url(${userInfo.avatorfile.url})`}"></view>
					<view class="cube__container__body__item cube__container__body__item--right"
						:style="{backgroundImage: `url(${userInfo.avatorfile.url})`}"></view>
					<view class="cube__container__body__item cube__container__body__item--left"
						:style="{backgroundImage: `url(${userInfo.avatorfile.url})`}"></view>
					<view class="cube__container__body__item cube__container__body__item--top"
						:style="{backgroundImage: `url(${userInfo.avatorfile.url})`}"></view>
					<view class="cube__container__body__item cube__container__body__item--bottom"
						:style="{backgroundImage: `url(${userInfo.avatorfile.url})`}"></view>
				</view>
			</view>
			<view class='tn-text-center tn-margin-top-lg'>
				<view class="tn-padding tn-text-bold tn-text-lg">{{ userInfo.name }}</view>
			</view>
		</view>

		<!-- 个人信息 -->
		<view v-if="userInfo" class="blogger-tips-data">
			<view class="blogger-tips-data__wrap tn-bg-white">
				<view class="tn-margin">
					<view class="tn-flex tn-flex-row-between">
						<view class="justify-content-item tn-text-bold tn-text-xl">
							个人信息
						</view>
					</view>
				</view>
				<!-- 更多信息-->
				<view class="tn-padding-top-sm tn-padding-bottom-sm">
					<tn-list-cell :hover="true" :unlined="true" :radius="true" :fontSize="34">
						<view class="tn-flex tn-flex-col-center">
							<view class="tn-flex-1">姓名</view>
							<view class="tn-margin-left-sm" style="font-size: 28rpx;">{{userInfo.name}}</view>
						</view>
					</tn-list-cell>
					<tn-list-cell :hover="true" :unlined="true" :radius="true" :fontSize="34">
						<view class="tn-flex tn-flex-col-center">
							<view class="tn-flex-1">职称</view>
							<view class="tn-margin-left-sm" style="font-size: 28rpx;">{{userInfo.title}}</view>
						</view>
					</tn-list-cell>
					<tn-list-cell :hover="true" :unlined="true" :radius="true" :fontSize="34">
						<view class="tn-flex tn-flex-col-center">
							<view class="tn-flex-1">研究方向</view>
							<view class="tn-margin-left-sm" style="font-size: 28rpx;">{{userInfo.researchDirection}}
							</view>
						</view>
					</tn-list-cell>
				</view>


				<!-- 边距间隔 -->
				<view class="tn-strip-bottom"></view>

				<view class="tn-margin">
					<view class="tn-flex tn-flex-row-between">
						<view class="justify-content-item tn-text-bold tn-text-xl">
							个人简历
						</view>
					</view>
				</view>
				<view class="tn-margin-sm">
					<mp-html :content="userInfo.content" />
				</view>

			</view>
		</view>
		<!-- 边距间隔 -->
		<view class="tn-strip-bottom"></view>
		<view class="tn-margin">
			<view class="tn-flex tn-flex-row-between">
				<view class="justify-content-item tn-text-bold tn-text-xl">
					成果
				</view>
			</view>
		</view>
		<!-- 内容 -->
		<view class="tn-flex tn-flex-direction-column tn-margin-top-sm tn-margin-bottom">

			<!-- 图文信息 -->
			<block v-for="(item,index) in artitleList" :key="index">
			  <view class="blogger__item tn-shadow">
						<view class="blogger__author tn-flex tn-flex-row-between tn-flex-col-center" @click.stop="toWeb(item.open_url, item.desc)">
							<view class="justify__author__info">
								<view class="tn-flex tn-flex-row-center">
									<view class="tn-flex tn-flex-row-center tn-flex-col-center">
										<view class="">
											<tn-avatar class="" shape="circle" :src="item.userAvatar" size="lg">
											</tn-avatar>
										</view>
										<view class="tn-padding-right tn-text-ellipsis">
											<view class="tn-padding-right tn-padding-left-sm tn-text-bold tn-text-lg">
												{{ item.userName }}</view>
											<view
												class="tn-padding-right tn-padding-left-sm tn-padding-top-xs tn-color-gray">
												{{ item.date }}</view>
										</view>
									</view>
								</view>
							</view>
							<view
								class="blogger__author__btn justify-content-item tn-flex-col-center tn-flex-row-center">
								<text class="tn-icon-more-vertical tn-color-gray tn-text-bold tn-text-xxl"></text>
							</view>
						</view>
			
						<view
							class="blogger__desc tn-margin-top-sm tn-margin-bottom-sm tn-text-justify tn-flex tn-flex-col-center tn-flex-row-left">
							<view v-for="(label_item,label_index) in item.label" :key="label_index"
								class="blogger__desc__label tn-float-left tn-margin-right tn-bg-gray--light tn-round tn-text-sm tn-text-bold">
								<text class="blogger__desc__label--prefix">#</text>
								<text class="tn-text-df">{{ label_item }}</text>
							</view>
			 			<view v-if="!item.label || item.label.length < 4"
								class="tn-text-bold blogger__desc__content tn-flex-1 tn-text-ellipsis tn-text-justify tn-text-df">
								标题 {{ item.desc }}</view>
						</view>
			
						<view v-if="item.content" class="blogger__content" :id="`blogger__content--${index}`">
							<view class="blogger__content__data" :style="{
			            height: `${item.contentContainerInit ? (!item.showAllContent ? contentHideShowHeight : item.contentContainerHeight) + 'px' : 'auto'}`
			          }">
								摘要 {{ item.content }}
							</view>
							<view v-if="item.hideContent" class="blogger__content__status"
								@tap="switchContentShowStatus(index)">{{ item.showAllContent ? '收起' : '全文'}}</view>
						</view>
			
						<block v-if="item.mainImage">
							<view v-if="[1,2,4].indexOf(item.mainImage.length) != -1" class="tn-padding-top-xs">
								<image v-for="(image_item,image_index) in item.mainImage" :key="image_index"
									class="blogger__main-image tn-shadow-blur" :class="{
			              'blogger__main-image--1 tn-margin-bottom-sm': item.mainImage.length === 1,
			              'blogger__main-image--2 tn-margin-right-sm tn-margin-bottom-sm': item.mainImage.length === 2 || item.mainImage.length === 4
			            }" @click="TanPreviewImage(item.mainImage, image_index)" :src="image_item.url" mode="aspectFill">
								</image>
							</view>
							<view v-else class="tn-padding-top-xs">
								<tn-grid hoverClass="none" :col="3">
									<block v-for="(image_item,image_index) in item.mainImage" :key="image_index">
										<!-- #ifndef MP-WEIXIN -->
										<tn-grid-item style="width: 30%;margin: 10rpx;">
											<image class="blogger__main-image blogger__main-image--3 tn-shadow-blur"
												:src="image_item.url"
												@click="TanPreviewImage(item.mainImage, image_index)" mode="aspectFill">
											</image>
										</tn-grid-item>
										<!-- #endif-->
										<!-- #ifdef MP-WEIXIN -->
										<tn-grid-item style="width: 30%;margin: 10rpx;">
											<image class="blogger__main-image blogger__main-image--3 tn-shadow-blur"
												@click="TanPreviewImage(item.mainImage, image_index)"
												:src="image_item.url" mode="aspectFill"></image>
										</tn-grid-item>
										<!-- #endif-->
			  				</block>
								</tn-grid>
							</view>
						</block>
			
						<view class="tn-flex tn-flex-row-between tn-flex-col-center tn-margin-top-xs">
							<view class="justify-content-item tn-color-gray tn-text-center">
			  			<view class="">
									<text class="blogger__count-icon tn-icon-message"></text>
									<text class="tn-padding-right">{{ item.commentCount }}</text>
									<text class="blogger__count-icon tn-icon-like"></text>
									<text class="">{{ item.likeCount }}</text>
								</view>
							</view>
							<view class="justify-content-item tn-flex tn-flex-col-center">
								<view style="margin-right: 10rpx;margin-left: 20rpx;">
									<tn-avatar-group :lists="item.viewUser.latestUserAvatar" size="sm">
									</tn-avatar-group>
								</view>
								<text class="tn-color-gray">{{ item.viewUser.viewUserCount }}人</text>
							</view>
						</view>
					</view>
				</block>


		</view>

		<!-- 引用组件 -->
		<tn-skeleton :show="showSkeleton"></tn-skeleton>
		
	</view>
</template>

<script>
	import day from 'tuniao-ui/day.js'
	import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
	const db = uniCloud.database()
	const bannerCollection = db.collection('opendb-banner')
	const memberCollection = db.collection('lab-member')
	const artitleCollection = db.collection('lab-artitle')

	export default {
		name: 'TemplateBlogger',
		mixins: [template_page_mixin],
		data() {
			return {
				// 内容默认隐藏显示的高度
				contentHideShowHeight: 0,
				uid: '',
				title: ['教授', '副教授', '讲师', '博士研究生', '硕士研究生'],
				userInfo: null,
				artitleList: [],
				adAutoplay: false,
				showSkeleton: true,
				day: day, // 时间戳处理
			}
		},
		computed: {},
		onLoad(info) {
			this.uid = info.uid
			this.getUserInfo(info.uid)
			this.getArtitle(info.uid)
			this.contentHideShowHeight = uni.upx2px(56) * 3
		},
		onReady() {

		},
		onShow() {
			this.adAutoplay = true
		},
		onHide() {
			this.adAutoplay = false
		},
		methods: {
			// 处理内容，给内容添加对应的标识信息
			initContentData() {
				this.artitleList.forEach((item, index) => {
					// 是否需要隐藏内容
					item.hideContent = false
					// 显示所有内容
					item.showAllContent = false
					// 内容容器的实际高度
					item.contentContainerHeight = 0
					// 内容容器是否初始化完成
					item.contentContainerInit = false
					this.$set(this.artitleList, index, item)
				})
			},
			// 获取内容容器的信息
			getContentRectInfo() {
				let contentRect = {}
				const query = uni.createSelectorQuery().in(this)
				// 筛选出存在内容的数据
				this.artitleList.forEach((item, index) => {
					if (item?.content) {
						query.select(`#blogger__content--${index}`).boundingClientRect()
						contentRect[index] = item
					}
				})
				// 获取所有内容的宽高信息
				query.exec(res => {
					if (!res) {
						setTimeout(() => {
							this.getContentRectInfo()
						}, 10)
						return
					}
			    res.map((item) => {
					const id = item.id
					const idIndex = /blogger__content--(\d)/.exec(id)[1]
			 		let contentItem = this.artitleList[idIndex]
					contentItem.hideContent = item.height > this.contentHideShowHeight
					contentItem.showAllContent = false
					contentItem.contentContainerHeight = item.height
					contentItem.contentContainerInit = true
					this.$set(this.artitleList, idIndex, contentItem)
					})
				})
			},
			// 切换内容的显示与隐藏
			switchContentShowStatus(index) {
				const contentItem = this.artitleList[index]
				contentItem.showAllContent = !contentItem.showAllContent
				this.$set(this.artitleList, index, contentItem)
			},
			goBack(){
				uni.navigateBack({
					
				})
			},
			goHome(){
				uni.switchTab({
					url:'/',
					animationType: 'fade-in'
				})
			},
			toWeb(url, title){
				if(typeof(url) == 'undefined'){
					uni.showToast({
						icon: 'none',
						title: '待添加跳转链接！'
					})
				}else{
					uni.navigateTo({
						url: '/pages/common/webview/webview?url='+url+'&title='+title,
						animationType: 'fade-in'
					})
				}
				
			},
			async getUserInfo(uid) {
				await memberCollection.doc(uid).get()
					.then((res) => {
						let userInfo = res.result.data[0]
						userInfo.title = this.title[userInfo.title]
						this.userInfo = userInfo
						this.showSkeleton = false
					}).catch((err) => {
						uni.hideLoading()
						uni.showModal({
							content: err,
							showCancel: false
						})
					})
			},
			// 获取成果信息
			async getArtitle(uid) {
				const member = memberCollection.field('_id,avatorfile,name')
					.getTemp() // 临时表field方法内需要包含关联字段，否则无法建立关联关系
				const artitle = artitleCollection.field(
						'uid,label,imageList,desc,date,open_url,status,view_count,like_count,mode')
					.getTemp() // 临时表field方法内需要包含关联字段，否则无法建立关联关系
				db.collection(artitle, member).where(`uid._id=="${uid}"`)
					.get()
					.then(res => {
						let imageList = res.result.data
						if(imageList.length>0){
							imageList.forEach((item, index) => {
								if (item.status == true) {
									this.artitleList.unshift({
										userAvatar: item.uid[0].avatorfile.url,
										userName: item.uid[0].name,
										date: this.day.timeTodate('Y-m-d', item.date),
										desc: item.label,
										content: item.desc,
										mainImage: item.imageList,
										open_url: item.open_url,
										viewUser: {
											latestUserAvatar: [{
													src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_1.jpeg'
												},
												{
													src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_2.jpeg'
												},
												{
													src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_3.jpeg'
												},
												{
													src: 'https://tnuiimage.tnkjapp.com/blogger/avatar_4.jpeg'
												},
											],
											viewUserCount: 62
										},
										commentCount: 46,
										likeCount: 83,
									})
								}
							})
							this.initContentData()
							this.$nextTick(() => {
								this.showSkeleton = false;
								this.getContentRectInfo()
							})
						}
						
					}).catch(err => {
						console.error(err)
					})
			},
		}
	}
</script>

<style lang="scss" scoped>
	@import '@/static/css/templatePage/custom_nav_bar.scss';

	$cube-size: 300rpx;
	$cube-split: 150rpx;

	/* 立体头像 start*/

	.cube {
		background: #fff;
		background-repeat: no-repeat;
		background-size: cover;
		height: 550rpx;
		display: flex;
		justify-content: center;
		padding-top: 0rpx;
		overflow: hidden;
		position: relative;
		flex-direction: column;
		align-items: center;
		font-weight: 300;

		&__container {
			margin-top: 100rpx;
			position: relative;
			width: $cube-size;
			height: $cube-size;
			-webkit-perspective: 500px;
			perspective: 500px; //透视太大会超过屏幕就不好了吖

			&:before {
				content: '';
				width: $cube-size;
				height: $cube-size;
				position: absolute;
				// top: calc(50% - ($cube-split - 30px));
				// left: calc(50% - $cube-split);
				background-color: #3c6496;
				filter: blur(60px);
				opacity: .8;
			}

			&__body {
				position: absolute;
				width: 100%;
				height: 100%;
				transform-style: preserve-3d;
				transform: translateZ(-75px);
				animation: cubeFrame 35s cubic-bezier(0.36, -0.03, 0.46, 0.95) infinite alternate;
				will-change: transform;

				&__item {
					position: absolute;
					display: block;
					display: flex;
					align-items: center;
					justify-content: center;
					width: $cube-size;
					height: $cube-size;
					font-size: 30px;
					background-repeat: no-repeat;
					background-size: cover;

					&--front {
						transform: rotateY(0deg) translateZ($cube-split);
						background-color: #BEEBFF;
					}

					&--back {
						transform: rotateX(180deg) translateZ($cube-split);
						background-color: #BEEBFF;
					}

					&--right {
						transform: rotateY(90deg) translateZ($cube-split);
						background-color: #BEEBFF;
					}

					&--left {
						transform: rotateY(-90deg) translateZ($cube-split);
						background-color: #BEEBFF;
					}

					&--top {
						transform: rotateX(90deg) translateZ($cube-split);
						background-color: #BEEBFF;
					}

					&--bottom {
						transform: rotateX(-90deg) translateZ($cube-split);
						background-color: #BEEBFF;
					}
				}
			}
		}
	}

	@keyframes cubeFrame {
		10% {
			transform: translateZ(-75px) rotateX(40deg) rotateY(60deg);
		}

		15% {
			transform: translateZ(-75px) rotateX(80deg) rotateY(20deg);
		}

		20% {
			transform: translateZ(-75px) rotateX(-180deg) rotateY(-70deg);
		}

		30% {
			transform: translateZ(-75px) rotateX(90deg) rotateY(180deg);
		}

		40% {
			transform: translateZ(-75px) rotateX(-10deg) rotateY(-140deg);
		}

		45% {
			transform: translateZ(-75px) rotateX(-100deg) rotateY(20deg);
		}

		55% {
			transform: translateZ(-75px) rotateX(-10deg) rotateY(-35deg);
		}

		60% {
			transform: translateZ(-75px) rotateX(180deg) rotateY(360deg);
		}

		70% {
			transform: translateZ(-75px) rotateX(-180deg) rotateY(-360deg);
		}

		80% {
			transform: translateZ(-75px) rotateX(45deg) rotateY(-70deg);
		}

		90% {
			transform: translateZ(-75px) rotateX(-45deg) rotateY(70deg);
		}

		100% {
			transform: translateZ(-75px) rotateX(-360deg) rotateY(360deg);
		}
	}

	/* 立体头像 end*/

	/* 信息提示 start */
	.blogger-tips-data {
		background-color: #F8F7F3;

		&__wrap {
			padding-top: 10rpx;
			border-radius: 60rpx 60rpx 0 0;
		}

		&__message {
			padding-top: 60rpx;

			&__container {
				padding: 5rpx;
				border-radius: 100rpx;
			}

			&__avatar {
				margin: 6rpx 0 0 6rpx;
			}
		}

		&__info {
			padding: 40rpx 0 0 0;
		}
	}

	/* 信息提示 end */

	/* 文章内容 start*/
	.blogger {
		&__item {
			padding: 30rpx;
		}

		&__author {
			&__btn {
				margin-right: -12rpx;
				opacity: 0.5;
			}
		}

		&__desc {
			line-height: 55rpx;

			&__label {
				padding: 0 20rpx;
				margin: 0rpx 18rpx 0 0;

				&--prefix {
					color: #00FFC8;
					padding-right: 10rpx;
				}
			}

			&__content {}
		}

		&__content {
			margin-top: 18rpx;
			padding-right: 18rpx;

			&__data {
				line-height: 46rpx;
				text-align: justify;
				overflow: hidden;
				transition: all 0.25s ease-in-out;
			}

			&__status {
				margin-top: 10rpx;
				font-size: 30rpx;
				color: $tn-main-color;
			}
		}

		&__main-image {
			border-radius: 16rpx;

			&--1 {
				max-width: 80%;
				max-height: 300rpx;
			}

			&--2 {
				max-width: 260rpx;
				max-height: 260rpx;
			}

			&--3 {
				height: 212rpx;
				width: 100%;
			}
		}

		&__count-icon {
			font-size: 40rpx;
			padding-right: 5rpx;
		}

		&__ad {
			width: 100%;
			height: 500rpx;
			transform: translate3d(0px, 0px, 0px) !important;

			::v-deep .uni-swiper-slide-frame {
				transform: translate3d(0px, 0px, 0px) !important;
			}

			.uni-swiper-slide-frame {
				transform: translate3d(0px, 0px, 0px) !important;
			}

			&__item {
				position: absolute;
				width: 100%;
				height: 100%;
				transform-origin: left center;
				transform: translate3d(100%, 0px, 0px) scale(1) !important;
				transition: transform 0.25s ease-in-out;
				z-index: 1;

				&--0 {
					transform: translate3d(0%, 0px, 0px) scale(1) !important;
					z-index: 4;
				}

				&--1 {
					transform: translate3d(13%, 0px, 0px) scale(0.9) !important;
					z-index: 3;
				}

				&--2 {
					transform: translate3d(26%, 0px, 0px) scale(0.8) !important;
					z-index: 2;
				}
			}

			&__content {
				border-radius: 40rpx;
				width: 640rpx;
				height: 500rpx;
				overflow: hidden;
			}

			&__image {
				width: 100%;
				height: 100%;
			}
		}
	}

	/* 文章内容 end*/

	/* 间隔线 start*/
	.tn-strip-bottom {
		width: 100%;
		border-bottom: 20rpx solid rgba(241, 241, 241, 0.8);
	}

	/* 间隔线 end*/
	/* 底部悬浮按钮 start*/
	.tn-tabbar-height {
		min-height: 100rpx;
		height: calc(120rpx + env(safe-area-inset-bottom) / 2);
	}

	.tn-footerfixed {
		position: fixed;
		width: 100%;
		bottom: calc(30rpx + env(safe-area-inset-bottom));
		z-index: 1024;
		box-shadow: 0 1rpx 6rpx rgba(0, 0, 0, 0);

	}

	/* 底部悬浮按钮 end*/

	/* 广告内容 start */
	.ad-image {
		width: 80rpx;
		height: 80rpx;
		position: relative;
	}

	.ad-pic {
		background-size: cover;
		background-repeat: no-repeat;
		// background-attachment:fixed;
		background-position: top;
		border-radius: 20%;
	}

	/* 自定义导航栏内容 end */
</style>
